<template>
	<a-layout :style="{ hight: '800px' }">
		<a-layout-header class="header">
			<div class="logo">LOGO图片</div>
			<a-menu
				v-model:selectedKeys="data.menu"
				theme="dark"
				mode="horizontal"
				:style="{ lineHeight: '64px' }"
				@click="menuClick"
				class="menu"
			>
				<a-menu-item v-for="(menu, index) in store.state.index.menu" :key="index">
					<component :is="icon[menu.icon]"></component>
					{{ menu.title }}
				</a-menu-item>
			</a-menu>
			<div class="config">
				<div class="badge">
					<a-dropdown>
						<a class="ant-dropdown-link" @click.prevent>
							<span style="margin-right: 24px">
								<a-badge :count="1">
									<a-avatar :src="store.state.index.member.avatar"> </a-avatar>
								</a-badge>
							</span>
						</a>
						<template #overlay>
							<a-menu @click="onClick">
								<a-menu-item key="1">个人设置</a-menu-item>
								<a-menu-item key="2">主题切换</a-menu-item>
								<a-menu-item key="3">退出登录</a-menu-item>
							</a-menu>
						</template>
					</a-dropdown>
				</div>
				<div class="dropdown">
					<a-dropdown :trigger="['click']">
						<a class="ant-dropdown-link" @click.prevent>
							组织切换
							<DownOutlined />
						</a>
						<template #overlay>
							<a-menu>
								<a-menu-item v-for="organizati in organizationList" key="0">
									{{ organizati.name }}
								</a-menu-item>
							</a-menu>
						</template>
					</a-dropdown>
				</div>
			</div>
		</a-layout-header>
		<a-layout>
			<a-layout-sider width="200" style="background: #fff">
				<a-menu v-model:selectedKeys="selectedKeys2" mode="inline" :style="{ height: '100%', borderRight: 0 }">
					<a-sub-menu
						v-if="subileMeun[data.menu].children"
						v-for="subMune in subileMeun[data.menu].children"
						:key="subMune.id"
					>
						<template #title>
							<span>
								<user-outlined />
								{{ subMune.title }}
							</span>
						</template>
						<a-menu-item v-if="subMune.children" v-for="item in subMune.children" :key="item.id">{{
							item.title
						}}</a-menu-item>
					</a-sub-menu>
				</a-menu>
			</a-layout-sider>
			<a-layout style="padding: 0 24px 24px">
				<a-breadcrumb style="margin: 16px 0">
					<a-breadcrumb-item>Home</a-breadcrumb-item>
					<a-breadcrumb-item>List</a-breadcrumb-item>
					<a-breadcrumb-item>App</a-breadcrumb-item>
				</a-breadcrumb>
				<a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
					<router-view />
				</a-layout-content>
			</a-layout>
		</a-layout>
	</a-layout>
</template>
<script setup>
import {
	UserOutlined,
	LaptopOutlined,
	NotificationOutlined,
	DownOutlined,
	AppstoreOutlined,
	ProjectOutlined,
	SettingOutlined,
	TeamOutlined,
} from '@ant-design/icons-vue'
import { computed, reactive } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const icon = {
	'appstore-o': AppstoreOutlined,
	project: ProjectOutlined,
	setting: SettingOutlined,
	team: TeamOutlined,
}
const subileMeun = computed(() => {
	return store.state.index.menu
})
const organizationList = computed(() => {
	return store.state.index.organizationList
})
console.log(store.state.index)
const data = reactive({
	menu: [1],
	selectedKeys2: [0],
	openKeys: ['sub'],
})

function menuClick(event) {
	console.log(subileMeun.value[event.key])
}
</script>
<style scoped lang="less">
.ant-layout {
	min-height: 100vh;
}
.ant-layout-header {
	padding: 0;
	display: flex;
}
#components-layout-demo-top-side-2 .logo {
	float: left;
	width: 120px;
	height: 31px;
	margin: 16px 24px 16px 0;
	background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
	float: right;
	margin: 16px 0 16px 24px;
}

.site-layout-background {
	background: #fff;
}

.logo {
	text-align: center;
	width: 200px;
	background-color: red;
}
.header {
	display: flex;
	justify-content: space-between;
	.config {
		flex: 1;
		display: flex;
		flex-direction: row-reverse;

		.dropdown {
			width: 100px;
		}
	}
}
</style>
